<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>货站帮（聚成国际）</title>
	<link rel="stylesheet" href="./css/saoma.css?v=05">
	<link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
	<form action="">
		<!-- 货站名称 -->
		<div class="huozhan_name"></div>
		<div class="wrap">
			<div class="flex_box_wrap">
				<div class="flex_box">
					<div class="flex_box_left">
						寄
					</div>
					<div class="flex_box_right">
						<div class="right_box_one">
							<input type="text" name="" id="" placeholder="请输入寄件人及电话" value="" class="fahuoren">
						</div>
						<div class="right_box_two">
							<input type="text" name="" id="" placeholder="请输入发货地址" value="" class="fahuoaddress">
						</div>
					</div>
					<!-- <div class="dizhi">
						<img src="./image/address.png" alt="">
						<div>地址簿</div>
					</div> -->
				</div>
				<div class="line"></div>
				<div class="flex_box">
					<div class="flex_box_leftcopy">
						收
					</div>
					<div class="flex_box_right">
						<div class="right_box_one">
							<input type="text" name="" id="" placeholder="请输入收件人及电话" value="" class="shouhuoren">
						</div>
						<div class="right_box_two">
							<input type="text" name="" id="" placeholder="请输入收货地址" value="" class="shouhuoaddress">
						</div>
					</div>
					<!-- <div class="dizhi">
						<img src="./image/address.png" alt="">
						<div>地址簿</div>
					</div> -->
				</div>
			</div>
			<!-- 货物信息 -->
			<div class="huowu_infor_wrap">
				<div class="huowu_every_row">
					<span>货物名称</span><input type="text" value="" class="ipt mingcheng" placeholder="请输入货物名称">
				</div>
				<div class="huowu_every_row">
					<span>包装</span><input type="text" value="" class="ipt baozhuang" placeholder="请输入包装">
				</div>
				<div class="huowu_every_row">
					<span>货物重量(kg)</span><input type="number" value="" class="ipt zhongliang" placeholder="请输入货物重量">
				</div>
				<div class="huowu_every_row">
					<span>货物体积(m³)</span><input type="number" value="" class="ipt tiji" placeholder="请输入货物体积">
				</div>
				<div class="huowu_every_row">
					<span>货物数量(件)</span><input type="number" value="" class="ipt number" placeholder="请输入货物件数">
				</div>
				<!-- <div class="huowu_every_row fukuanfangshi">
					<span>付款方式</span>
					<input type="radio" name="money" id="daofu" class="" value="到付"><label for="daofu">到付</label>
					<input type="radio" name="money" id="xianfu" class="" value="现付"><label for="xianfu">现付</label>
				</div> -->
				<div class="huowu_every_row">
					<span>备 注</span><input type="text" value="" class="ipt huobeizhu" placeholder="请输入货物备注">
				</div>
			</div>
			<div class="shenhe_btn" lay-submit="" lay-filter="demo1">
				提交
			</div>
			<div class="all">
				<div class="tankuang">
					<img src="./image/ok.png" alt="">
					<div>订单提交成功</div>
					<div class="one_btn" onclick="closeTanChuang()">确定</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script src="./jquery/jquery.js"></script>
<script src="./layui/layui.all.js"></script>
<script type="text/javascript">
	// 获取code
	function getQueryVariable(variable) {
		// 参数 window.location.search
		var query = decodeURI(window.location.search.substring(1));
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	$.ajax({
		url: "http://47.92.253.254/huozhanbang/api/hzb/v2/getZhangHaoById",
		type: "get",
		data: {
			zhanghaoId: getQueryVariable('zhanghaoid')
		},
		success: function (res) {
			console.log(res)
			if (res.code == 0) {
				let data = res.list[0]
				$('.huozhan_name').html(`${res.list[0].name}`)
			} else {
				//不等于0时填出的内容
				layer.msg(res.msg)
			}
		},
		error: function (err) {
			console.log(err)
			layer.msg("网络繁忙，访问失败")
		}
	})

	document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
	layui.use(['form', 'layer', 'jquery'], function () {
		var form = layui.form,
			layer = layui.layer,
			$ = layui.jquery;
		var flag = true;//提交的锁
		//监听提交
		form.on('submit(demo1)', function (data) {
			console.log($('input:radio:checked').val())
			flag = false
			var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			// 判断是不是都是数字
			var reg = /^[0-9]*$/
			// 分割人名手机号
			if (!$('.fahuoren').val().includes('1')) {
				layer.msg('请输入寄件人及手机号')
				flag = true
				return
			} else {
				// 先判断发货方信息
				var idx = $('.fahuoren').val().indexOf('1')
				if (!$('.fahuoren').val().substring(0, idx)) {
					layer.msg('请输入寄件人')
					flag = true
				} else if (!$('.fahuoren').val().substring(idx)) {
					layer.msg('请输入寄件人手机号')
					flag = true
				} else if (!reg_tel.test($('.fahuoren').val().substring(idx))) {
					layer.msg('寄件人手机号有误')
					flag = true
				} else if (!$('.fahuoaddress').val()) {
					layer.msg('请输入寄件人地址')
					flag = true
				} else {
					// 判断收货方信息
					if (!$('.shouhuoren').val().includes('1')) {
						layer.msg('请输入收货人及手机号')
						flag = true
						return
					} else {
						var idxcopy = $('.shouhuoren').val().indexOf('1')
						if (!$('.shouhuoren').val().substring(0, idxcopy)) {
							layer.msg('请输入收货人')
							flag = true
						} else if (!$('.shouhuoren').val().substring(idxcopy)) {
							layer.msg('请输入收货人手机号')
							flag = true
						} else if (!reg_tel.test($('.shouhuoren').val().substring(idxcopy))) {
							layer.msg('收货人手机号有误')
							flag = true
						} else if (!$('.shouhuoaddress').val()) {
							layer.msg('请输入收货人地址')
							flag = true
						} else {
							// 收发货方信息都有
							if (!$('.mingcheng').val()) {
								layer.msg('请输入货物名称')
								flag = true
							} else if (!$('.number').val()) {
								layer.msg('货物数量不能为空')
								flag = true
							} else {
								let datas = {
									zhonglei: $('.zhonglei').val(), // 种类
									name: $('.mingcheng').val(), // 名称
									nummber: $('.number').val(), // 数量
									zhongliang: $('.zhongliang').val(), // 重量 
									fahuoren: $('.fahuoren').val().substring(0, idx), // 发货人 
									fatel: $('.fahuoren').val().substring(idx), // 发货人手机号 
									faaddress: $('.fahuoaddress').val(), // 发货人地址
									shouhuoren: $('.shouhuoren').val().substring(0, idxcopy), // 收货人 
									shouaddress: $('.shouhuoaddress').val(), // 收货人地址
									shoutel: $('.shouhuoren').val().substring(idxcopy), // 收货人手机号 
									remarkss: $('.huobeizhu').val(), // 备注 
									baoZhuang:$('.baozhuang').val(),
									tiJi:$('.tiji').val(),
									// fuKuanFangShi:$('input:radio:checked').val(),
									zhanghaoid: getQueryVariable('zhanghaoid') // 属于哪个货站
								}
								$.ajax({
									url: "http://47.92.253.254/huozhanbang/api/hzb/v2/addDingDan",
									type: "post",
									data: datas,
									success: function (res) {
										console.log(res)
										if (res.code == 200) {
											document.body.scrollTop = 0;
											document.documentElement.scrollTop = 0;
											document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
											document.body.style.overflow = "hidden"
											$(".all").css("display", "block")
											flag = true
										} else {
											layer.msg(res.msg)
											flag = true
										}
									},
									error: function (err) {
										console.log(err)
										layer.msg("网络繁忙，访问失败")
										flag = true
									}
								})
							}
						}
					}
				}
			}
		})
	})
	function closeTanChuang() {
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
		document.getElementsByClassName('wrap')[0].style.height = window.screen.height + "px"
		document.body.style.overflow = "auto"
		$(".all").css("display", "none")
		// 页面内容清空
		$('.zhonglei').val('')
		$('.mingcheng').val('')
		$('.number').val('')
		$('.zhongliang').val('')
		$('.fahuoren').val('')
		$('.fahuoaddress').val('')
		$('.shouhuoaddress').val('')
		$('.shouhuoren').val('')
		$('.huobeizhu').val('')
		$('.tiji').val('')
		$('.baozhuang').val('')
	}
</script>

</html>